<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>编辑管理员</title>
    <!-- 引入必要的资源，与manage_admins.jsp一致 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        admin: '#6366f1',
                        neutral: {
                            800: '#1f2937'
                        }
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .form-input-focus {
                @apply focus:ring-2 focus:ring-admin/50 focus:border-admin;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans">
<!-- 导航栏，与manage_admins.jsp一致 -->
<nav class="bg-white shadow-md sticky top-0 z-50">
    <!-- 导航栏内容 -->
</nav>

<main class="container mx-auto px-4 py-8">
    <div class="bg-gradient-to-r from-admin/10 to-admin/5 rounded-xl p-6 mb-8">
        <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-neutral-800">编辑管理员</h1>
        <p class="text-neutral-600 mt-2">修改管理员账户信息</p>
    </div>

    <div class="bg-white rounded-xl p-6 card-shadow">
        <form action="<%= request.getContextPath() %>/admin/edit" method="post">
            <input type="hidden" id="adminId" name="adminId" value="${admin.id}">

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div>
                    <label for="username" class="block text-sm font-medium text-neutral-700 mb-1">用户名 <span class="text-red-500">*</span></label>
                    <input type="text" id="username" name="username" value="${admin.username}" readonly class="w-full px-4 py-2 border border-neutral-300 rounded-lg bg-neutral-50">
                </div>
                <div>
                    <label for="name" class="block text-sm font-medium text-neutral-700 mb-1">姓名 <span class="text-red-500">*</span></label>
                    <input type="text" id="name" name="name" value="${admin.name}" required class="w-full px-4 py-2 border border-neutral-300 rounded-lg form-input-focus">
                </div>
                <div>
                    <label for="email" class="block text-sm font-medium text-neutral-700 mb-1">邮箱 <span class="text-red-500">*</span></label>
                    <input type="email" id="email" name="email" value="${admin.email}" required class="w-full px-4 py-2 border border-neutral-300 rounded-lg form-input-focus">
                </div>
                <div>
                    <label for="role" class="block text-sm font-medium text-neutral-700 mb-1">角色 <span class="text-red-500">*</span></label>
                    <select id="role" name="role" required class="w-full px-4 py-2 border border-neutral-300 rounded-lg form-input-focus">
                        <option value="editor" ${admin.role == 'editor' ? 'selected' : ''}>编辑</option>
                        <option value="viewer" ${admin.role == 'viewer' ? 'selected' : ''}>查看者</option>
                    </select>
                </div>
                <div>
                    <label for="password" class="block text-sm font-medium text-neutral-700 mb-1">新密码</label>
                    <input type="password" id="password" name="password" class="w-full px-4 py-2 border border-neutral-300 rounded-lg form-input-focus" placeholder="留空表示不修改密码">
                </div>
                <div>
                    <label for="confirmPassword" class="block text-sm font-medium text-neutral-700 mb-1">确认新密码</label>
                    <input type="password" id="confirmPassword" name="confirmPassword" class="w-full px-4 py-2 border border-neutral-300 rounded-lg form-input-focus" placeholder="留空表示不修改密码">
                </div>
            </div>

            <div class="flex justify-end space-x-4">
                <a href="<%= request.getContextPath() %>/cjj/manage_admins.jsp" class="px-5 py-2.5 border border-neutral-300 text-neutral-700 rounded-lg hover:bg-neutral-50 transition-colors btn-hover">
                    取消
                </a>
                <button type="submit" class="px-5 py-2.5 bg-admin text-white rounded-lg hover:bg-admin/90 transition-colors btn-hover">
                    <i class="fa fa-save mr-2"></i> 保存修改
                </button>
            </div>
        </form>
    </div>
</main>

<!-- 页脚，与manage_admins.jsp一致 -->
<footer class="bg-white border-t border-neutral-200 py-6">
    <!-- 页脚内容 -->
</footer>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 密码输入框联动
        const passwordInput = document.getElementById('password');
        const confirmPasswordInput = document.getElementById('confirmPassword');

        passwordInput.addEventListener('input', function() {
            if (this.value && confirmPasswordInput.value && this.value !== confirmPasswordInput.value) {
                confirmPasswordInput.setCustomValidity('两次密码不一致');
            } else {
                confirmPasswordInput.setCustomValidity('');
            }
        });

        confirmPasswordInput.addEventListener('input', function() {
            if (passwordInput.value && this.value && passwordInput.value !== this.value) {
                this.setCustomValidity('两次密码不一致');
            } else {
                this.setCustomValidity('');
            }
        });
    });
</script>
</body>
</html>